<template>
  <div class="page-container">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span>教师管理</span>
          <el-button type="primary" @click="showAddDialog = true">
            <el-icon><Plus /></el-icon>
            添加教师
          </el-button>
        </div>
      </template>

      <el-table 
        :data="teachers" 
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="employee_id" label="工号" width="120" />
        <el-table-column prop="class_time" label="上课时间" min-width="200" />
        <el-table-column prop="unavailable_time" label="不想监考时间" min-width="200" />
        <el-table-column prop="lives_in_weishui" label="是否在渭水居住" width="140">
          <template #default="scope">
            <el-tag :type="scope.row.lives_in_weishui ? 'success' : 'info'">
              {{ scope.row.lives_in_weishui ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="editTeacher(scope.row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteTeacher(scope.row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑教师对话框 -->
    <el-dialog 
      :title="isEdit ? '编辑教师' : '添加教师'"
      v-model="showAddDialog"
      width="600px"
    >
      <el-form :model="teacherForm" :rules="teacherRules" ref="teacherFormRef" label-width="120px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="teacherForm.name" placeholder="请输入教师姓名" />
        </el-form-item>
        <el-form-item label="工号" prop="employee_id">
          <el-input v-model="teacherForm.employee_id" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="上课时间" prop="class_time">
          <el-input 
            v-model="teacherForm.class_time" 
            type="textarea"
            placeholder="例如：周一1-2节，周三5-6节"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="不想监考时间" prop="unavailable_time">
          <el-input 
            v-model="teacherForm.unavailable_time" 
            type="textarea"
            placeholder="例如：周二7-8节，周四9-10节"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="是否在渭水居住">
          <el-switch v-model="teacherForm.lives_in_weishui" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveTeacher">
          {{ isEdit ? '更新' : '添加' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { User, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { teacherApi } from '@/api/teacher'

interface Teacher {
  id?: number
  name: string
  employee_id: string
  class_time: string
  unavailable_time: string
  lives_in_weishui: boolean
}

const teachers = ref<Teacher[]>([])
const showAddDialog = ref(false)
const isEdit = ref(false)
const teacherFormRef = ref<FormInstance>()

const teacherForm = reactive<Teacher>({
  name: '',
  employee_id: '',
  class_time: '',
  unavailable_time: '',
  lives_in_weishui: false
})

const teacherRules = {
  name: [
    { required: true, message: '请输入教师姓名', trigger: 'blur' }
  ],
  employee_id: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ]
}

const loadTeachers = async () => {
  try {
    teachers.value = await teacherApi.getTeachers()
  } catch (error) {
    ElMessage.error('加载教师列表失败')
  }
}

const resetForm = () => {
  teacherForm.name = ''
  teacherForm.employee_id = ''
  teacherForm.class_time = ''
  teacherForm.unavailable_time = ''
  teacherForm.lives_in_weishui = false
  isEdit.value = false
  delete teacherForm.id
}

const editTeacher = (teacher: Teacher) => {
  Object.assign(teacherForm, teacher)
  isEdit.value = true
  showAddDialog.value = true
}

const saveTeacher = async () => {
  if (!teacherFormRef.value) return
  
  try {
    await teacherFormRef.value.validate()
    
    if (isEdit.value && teacherForm.id) {
      await teacherApi.updateTeacher(teacherForm.id, teacherForm)
      ElMessage.success('教师信息更新成功')
    } else {
      await teacherApi.createTeacher(teacherForm)
      ElMessage.success('教师添加成功')
    }
    
    showAddDialog.value = false
    resetForm()
    loadTeachers()
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const deleteTeacher = async (teacher: Teacher) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除教师 ${teacher.name} 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    if (teacher.id) {
      await teacherApi.deleteTeacher(teacher.id)
      ElMessage.success('删除成功')
      loadTeachers()
    }
  } catch (error) {
    // 用户取消删除
  }
}

onMounted(() => {
  loadTeachers()
})
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.header-icon {
  color: #409EFF;
  font-size: 18px;
}

:deep(.el-table) {
  background-color: transparent;
}

:deep(.el-table tr) {
  background-color: transparent;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: rgba(0, 0, 0, 0.02);
}

:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
</style>
